<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.global.js"></script>
</head>
<style>
    .cls1 {
        color: blue;
    }

    .cls2 {
        background-color: darkorange;
    }
</style>
<body>
<!--
 格式
    <h1 :class="值">元素</h1>  值可以是字符串、对象、对象名、数值



 -->
<div id="app">
    <ul>
        <li class="cls1">第一个</li>
        <li class="cls2">第二个</li>
        <li :class="exterior1">第三个（常用）</li>
        <li :class="[exterior1,exterior2]">第四个（常用）</li>
        <li :class="{cls1:true,cls2:is_add_cls2}" @click="change_cls2">第五个</li>
        <li :class="exterior3" @click="exterior3.cls2=!exterior3.cls2">第六个（最常用）</li>
    </ul>
</div>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                exterior1: "cls1",
                exterior2: "cls2",
                is_add_cls2: false,
                exterior3: {
                    cls1: true,//cls1是原来样式中定义的类名
                    cls2: true
                }
            }
        },
        methods:{
            change_cls2(){
                this.is_add_cls2 = !this.is_add_cls2
            }
        }
    }).mount("#app")
</script>
</body>
</html>